<template>
  <div>
    <grid-layout :responsive ='true' :isResizable="false" :autoSize="false" :preventCollision="true" :useCssTransforms="true" :colNum="12" :rowHeight="50"
      :margin="[50, 50]" :isDraggable="true" :layout.sync="layout">

      <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
        {{ item.i }}
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>

import VueGridLayout from 'vue-grid-layout';
export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  data() {
    return {
      layout: [
        { "x": 0, "y": 0, "w": 2, "h": 2, "i": "0" },
        { "x": 2, "y": 0, "w": 2, "h": 2, "i": "1" },
        { "x": 4, "y": 0, "w": 2, "h": 2, "i": "2" },
        { "x": 6, "y": 0, "w": 2, "h": 2, "i": "3" },
        { "x": 8, "y": 0, "w": 2, "h": 2, "i": "4" },
        { "x": 10, "y": 0, "w": 2, "h": 2, "i": "5" },
        { "x": 0, "y": 2, "w": 2, "h": 2, "i": "6" },
        { "x": 2, "y": 2, "w": 2, "h": 2, "i": "7" },
        { "x": 4, "y": 2, "w": 2, "h": 2, "i": "8" },
        { "x": 6, "y": 2, "w": 2, "h": 2, "i": "9" },
        { "x": 8, "y": 2, "w": 2, "h": 2, "i": "10" },
      ],
    }
  }
}
</script>

<style  scoped>
.vue-grid-item.cssTransforms {
  background-color: #ccc;
}
</style>>